import React from 'react';
import { observer, inject } from 'mobx-react';
import * as mobx from 'mobx';
import { withRouter } from 'react-router-dom';
import WfSelect from '../../public/wf-form-select/index';
import { _ } from '../../util/pcPublic';

@inject('wfGlobalStore','wfLayoutStore')
@withRouter
@observer
export default class SelectElement extends React.Component{
    doChangeEvent(value){
        const { fieldMark,wfLayoutStore } = this.props;
		wfLayoutStore.changeSingleFieldValue(fieldMark, {value: value});
	}
    render() {
        const { fieldid,fieldMark,viewAttr,fieldAttr,symbol,rowIndex,cellObj,fieldObj, wfLayoutStore } = this.props;
        const { propFileCfg={}, variableMap } = wfLayoutStore;
        const { mobile_show_radio, mobile_show_checkbox } = propFileCfg;
        const { value,variable,fieldStore } = fieldObj;
        const field_show_checkbox = variableMap.has("control_checkbox_field" + fieldid) ? variableMap.get("control_checkbox_field" + fieldid) : 0;
        const field_show_radio = variableMap.has("control_radio_field" + fieldid) ? variableMap.get("control_radio_field" + fieldid) : 0;
        let { selectattr } = fieldAttr;
        let { detailtype } = this.props;
        if(detailtype === 0)    //系统单据默认为选择框
            detailtype = 1;
        const optionRange = variable.has("optionRange") ? variable.get("optionRange") : null;
        const filterOptionRange = variable.has("filterOptionRange") ? variable.get("filterOptionRange") : null;
        let options = [];
        if(detailtype === 1 || detailtype === 3)    //下拉选择框才需要空选项
            options.push({value:'', label:''});
            
        if(fieldAttr.htmltype !== 5){   //字段类型变更为选择框情况
            let changeFieldTypeSelectOption = mobx.toJS(variable.get("changeFieldTypeSelectOption")) || [];
            changeFieldTypeSelectOption = changeFieldTypeSelectOption.map(item =>{
                return {...item, ...{value:item.key, label:item.showname}};
            });
            options = options.concat(changeFieldTypeSelectOption);
        }else{
            const itemList = selectattr.selectitemlist;
            itemList && itemList.map(item => {
                const selectvalue = item.selectvalue.toString();		//必须转字符串
                if(item.cancel === 1 && ((viewAttr === 1 && selectvalue !== value) || viewAttr === 2 || viewAttr === 3))
                    return true;
                if(optionRange !== null && _.indexOf(optionRange,selectvalue) === -1)	//选择框联动控制范围
                    return true;
                if(filterOptionRange !== null && _.indexOf(filterOptionRange,selectvalue) > -1)   //接口控制remove选项
                    return true;
                options.push({value:selectvalue, label:item.selectname});
            });
        }

        return (
            <WfSelect
                domKey={fieldMark}
                detailtype={detailtype}
                store={fieldStore}
                className="wf-req-select-item"
                viewAttr={viewAttr}
                value={value}
                options={options}
                onChange={this.doChangeEvent.bind(this)}
                mobile_show_radio={mobile_show_radio}
                mobile_show_checkbox={mobile_show_checkbox}
                field_show_checkbox={field_show_checkbox}
                field_show_radio={field_show_radio}
                fieldAttr={fieldAttr}
            />
        )
    }
}